<template>
  <div class="banner border-card">
    <n-carousel :slides-per-view="3" :space-between="20" show-arrow autoplay :loop="true" draggable>
      <div class="bannerItem">
        <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
        >
        <p class="title">
          carousel1
        </p>
      </div>
      <div class="bannerItem">
        <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
        />
        <p class="title">
          carousel1
        </p>
      </div>
      <div class="bannerItem">
        <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
        />
        <p class="title">
          carousel1
        </p>
      </div>
      <div class="bannerItem">
        <img
            class="carousel-img"
            src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
        />
        <p class="title">
          carousel1
        </p>
      </div>
    </n-carousel>
  </div>
</template>
<script setup lang="ts">
import {NCarousel} from "naive-ui"
</script>
<style scoped lang="scss">
.banner {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.64);

  .bannerItem {
    display: inline-block;

    .title {
      text-align: center;
      display: none;
    }

    .carousel-img {
      width: 100%;
      min-width: 300px;
      height: 300px;
      object-fit: cover;
      border-radius: 12px;
      border: 5px solid #fff;
      box-sizing: border-box;
    }
  }
}


</style>
